<!DOCTYPE HTML>
<html>
<head>
    <title>mViewer</title>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <META name="description"
          content="This is the Home page for mViewer a MongoDB UI"/>
    <LINK rel="SHORTCUT ICON" href="images/icon.png"/>
    <!--YUI 3 JS files imported   -->
    <LINK type="text/css" rel="stylesheet"
          href="lib/yui/build/cssfonts/fonts-min.css"/>
    <LINK type="text/css" rel="stylesheet"
          href="lib/yui/build/node-menunav/assets/node-menunav-core.css"/>
    <LINK type="text/css" rel="stylesheet"
          href="lib/yui/build/node-menunav/assets/skins/sam/node-menunav.css"/>
    <!--YUI 2 JS files imported   -->
    <LINK rel="stylesheet" type="text/css"
          href="lib/yui2/build/fonts/fonts-min.css"/>
    <link rel="stylesheet" type="text/css"
          href="lib/yui2/build/button/assets/skins/sam/button.css">
    <link rel="stylesheet" type="text/css"
          href="lib/yui2/build/menu/assets/skins/sam/menu.css">
    <LINK rel="stylesheet" type="text/css"
          href="lib/yui2/build/tabview/assets/skins/sam/tabview.css"/>
    <LINK rel="stylesheet" type="text/css"
          href="lib/yui2/build/paginator/assets/skins/sam/paginator.css">
    <LINK rel="stylesheet" type="text/css"
          href="lib/yui2/build/datatable/assets/skins/sam/datatable.css">
    <LINK rel="stylesheet" type="text/css"
          href="lib/yui2/build/container/assets/skins/sam/container.css"/>
    <link href="css/fileupload.css" rel="stylesheet" type="text/css">
    <!-- CSS for basic widgets provided by jQuery-->
    <link rel="stylesheet" href="lib/jQuery/css/jquery-ui-1.9.1.css" />
    <!-- Bootstrap Image Gallery styles -->
    <LINK rel="stylesheet" href="lib/jQuery/css/bootstrap-image-gallery.min.css"/>
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <LINK rel="stylesheet" href="lib/jQuery/css/jquery.fileupload-ui.css"/>
    <LINK href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="lib/yui/build/yui/yui-min.js"></script>
    <script type="text/javascript" src="lib/yui/build/node-menunav/node-menunav.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="lib/yui2/build/json/json-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/element/element-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="lib/yui2/build/swf/swf-min.js"></script>
    <script type="text/javascript" src="lib/yui2/build/charts/charts-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="lib/yui2/build/json/json-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/connection/connection-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/tabview/tabview-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/paginator/paginator-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/datatable/datatable-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/container/container-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/animation/animation-min.js"></script>
    <script type="text/javascript" src="lib/yui2/build/button/button-min.js"></script>
    <script type="text/javascript" src="lib/yui2/build/menu/menu-min.js"></script>
    <script type="text/javascript"
            src="lib/yui2/build/container/container_core.js"></script>
    <script type="text/javascript" src="lib/yui2/build/dragdrop/dragdrop-min.js"></script>

    <!-- jQuery files-->
    <script src="lib/jQuery/jquery-1.9.1.js"></script>
    <script src="lib/jQuery/jquery-ui-1.9.1.js"></script>
    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="lib/jQuery/templates/tmpl.min.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="lib/jQuery/templates/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="lib/jQuery/templates/canvas-to-blob.min.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="lib/jQuery/fileupload/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="lib/jQuery/fileupload/jquery.fileupload.js"></script>
    <!-- The File Upload image processing plugin -->
    <script src="lib/jQuery/fileupload/jquery.fileupload-ip.js"></script>
    <!-- The File Upload user interface plugin -->
    <script src="lib/jQuery/fileupload/jquery.fileupload-ui.js"></script>
    <!-- The localization script -->
    <script src="lib/jQuery/fileupload/locale.js"></script>


    <!--Custom JS   -->
    <script type="text/javascript" src="js/loadingPanel.js"></script>
    <script type="text/javascript" src="js/treeblePaginator.js"></script>
    <script type="text/javascript" src="js/treeblePatch.js"></script>
    <script type="text/javascript" src="js/treeble.js"></script>
    <script type="text/javascript" src="js/utility.js"></script>
    <script type="text/javascript" src="js/alertDialog.js"></script>
    <script type="text/javascript" src="js/dataTable.js"></script>
    <script type="text/javascript" src="js/uploadDialog.js"></script>
    <script type="text/javascript" src="js/submitDialog.js"></script>
    <script type="text/javascript" src="js/confirmationDialog.js"></script>
    <script type="text/javascript" src="js/queryExecutor.js"></script>
    <script type="text/javascript" src="js/dbOperations.js"></script>
    <script type="text/javascript" src="js/collectionOperations.js"></script>
    <script type="text/javascript" src="js/documentOperations.js"></script>
    <script type="text/javascript" src="js/fileOperations.js"></script>
    <script type="text/javascript" src="js/headerOperations.js"></script>
    <script type="text/javascript" src="js/console.js"></script>
    <script type="text/javascript" src="js/systemCollectionOperations.js"></script>

    <!--scripts used for better navigation -->
    <script type="text/javascript" src="js/navigator.js"></script>

    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade" style="display:block">
            <td class="name" style="width:120px"><span title="{%=file.name%}" class="wrap_filename">{%=file.name%}</span></td>
            <td class="size" style="width:60px"><span>{%=o.formatFileSize(file.size)%}</span></td>
            {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span>
                {%=locale.fileupload.errors[file.error] || file.error%}
            </td>
            {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active">
                    <div class="bar" style="width:0%;"></div>
                </div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary" style="display:none"></button>
                {% } %}
            </td>
            {% } else { %}
            <td colspan="2"></td>
            {% } %}
            <td class="cancel">{% if (!i) { %}
                <button class="btn btn-warning">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>{%=locale.fileupload.cancel%}</span>
                </button>
                {% } %}
            </td>
        </tr>
        {% } %}
    </script>
    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade" style="display:block">
            {% if (file.error) { %}
            <td class="name" style="width:120px"><span>{%=file.name%}</span></td>
            <td class="size" style="width:60px"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" style="width:150px"><span
                class="label label-important">{%=locale.fileupload.error%}</span>
                {%=locale.fileupload.errors[file.error] || file.error%}
            </td>
            {% } else { %}
            <td class="name" style="width:212px">
                <a href="{%=file.url%}" title="{%=file.name%}" target="_blank"><span title="{%=file.name%}" class="wrap_filelink">{%=file.name%}</span></a>
            </td>
            <td class="success"><span>Success</span></td>
            <td class="size" style="width:60px"><span>{%=o.formatFileSize(file.size)%}</span></td>
            {% } %}
            <td class="delete">
                <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                    <i class="icon-trash icon-white"></i>
                    <span>{%=locale.fileupload.destroy%}</span>
                </button>
            </td>
        </tr>
        {% } %}
    </script>

</head>
<body bgcolor="#EEEEEE" class="yui3-skin-sam yui-skin-sam">
<div class="wrapper">
    <div class="nav-bar">
        <div class="nav-link-home">
            <a href="" class="logo gen-float"></a>
            <a href="" class="hostname">Host: <span id="hostname"></span></a>
            <a href="" class="hostname">User: <span id="user"></span></a>
        </div>

        <div class="searchBox">
            <input type="text" id="assistText" class="assistText" placeholder="Search, navigate and execute" title="Quickly navigate to any visible action item (db, collection, link, button, menu, etc) typing any 3 letters of its text. Navigate through the highlighted items using up/down keys and through their siblings if any using right/left keys. Click enter to execute the selected item. Shortcut key: ctrl + ' '."/>
        </div>

        <div>
            <ul class="nav-link-top gen-float">
                <li><a id="serverStats"  class="navigable" data-search_name="Server statistics">Server Statistics</a>
                </li>
                <li><a id="graphs"  class="navigable" data-search_name="Graphs">Mongo Graphs</a>
                </li>
            </ul>
            <ul class="nav-link-top nav-link-right">
                <li><a id="help" class="navigable" data-search_name="help" style="font-size: 11px;">Help</a>
                </li>
                <label style="color: white;">|</label>
                <li><a id="disconnect" class="navigable" data-search_name="Disconnect" style="font-size: 11px;">Disconnect</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="title-head">
        <span id="infoMsg" class="infoMsg">
            <span id="infoIcon"></span>
            <span id="infoText" class="infoText"></span>
        </span>
    </div>
    <div class="body-cont gen-float">
        <div class="generalInfo" style="display:none"> &nbsp;</div>
        <div class="left-cont gen-float">
            <div id="dbBuffer" class="buffer dbBuffer">
                <div class="list-head">
                    <div class="db-header-label navigable" data-search_name="databases"><label class="db">Databases</label></div>
                    <button id="createDB" title="Add new DB" class="navigable" data-search_name="add db"></button>
                </div>
                <div id="dbNames" class="yui3-menu yui3-splitbuttonnav">
                    <div class="yui3-menu-content" style="border:none">
                        <ul class="lists">
                        </ul>
                    </div>
                    <p></p>
                </div>
            </div>

            <div id="dbOperations" style="display: none">
                <div id="collectionBuffer" class="buffer collectionBuffer">
                    <div class="list-head navigable" data-search_name="collections-list">
                        <label class="collections">Collections</label>
                    </div>
                    <div id="collNames" class="dbOperation yui3-menu yui3-splitbuttonnav">
                        <div class="yui3-menu-content" style="border:none">
                            <ul class="lists">
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="gridFSBuffer" class="buffer collectionBuffer">
                    <div class="list-head navigable" data-search_name="gridfs">
                        <label class="gridFS">GridFS</label>
                    </div>
                    <div id="bucketNames" class="dbOperation yui3-menu yui3-splitbuttonnav">
                        <div class="yui3-menu-content" style="border:none">
                            <ul class="lists">
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="systemCollectionsBuffer" class="buffer collectionBuffer">
                    <div class="list-head navigable" data-search_name="Users & Indexes">
                        <label class="collections">Users & Indexes</label>
                    </div>
                    <div id="systemCollections" class="dbOperation yui3-menu yui3-splitbuttonnav">
                        <div class="yui3-menu-content" style="border:none">
                            <ul class="lists">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div id="dbContextMenu"></div>
            <div id="collContextMenu"></div>
        </div>

        <div class="right-cont gen-float">
            <div class="buffer">
                <div id="queryExecutor" class="tab-cont" style="display:none">Query Executor</div>
                <div id="queryForm"></div>
            </div>
            <div id="mainBodyHeader"></div>
            <div id="resultBuffer" class="buffer resultBuffer">
                <div id="mainBody">
                    <center>
                        <img src="images/index_logo.png" alt="mViewer Logo"
                             title="mViewer Logo">

                        <p>a mongoDB management Tool</p>

                        <h3>Pramati Technologies</h3>
                        <br>
                        <br>

                        <p>

                        <h2>Pick your database and see what it can do for you!!</h2></p>
                    </center>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="confirmationDialogContainer"></div>
<div id="alertDialogContainer"></div>
<div id="addDBDialog" class="yui-pe-content">
    <div class="hd">Add Database</div>
    <div class="bd">
        <form method="POST">
            <label class="dialogLabel">DB Name:</label>
            <input value="" type="text" name="name"/>

            <div class="clear"></div>
        </form>
    </div>
</div>
<div id="addColDialog" class="yui-pe-content">
    <div class="hd">Add Collection</div>
    <div class="bd">
        <form method="POST">
            <label class="dialogLabel">Name:</label>
            <input type="text" id="newCollName" name="newCollName" title="Enter name of the collection"/>
            <input type="hidden" id="updateColl" name="updateColl" value="false">
            <div class="clear"></div>
            <label class="dialogLabel">Capped: <input type="checkbox" id="isCapped" name="isCapped"
                                                      title="Enable to create a capped collection"/></label>

            <div class="clear"></div>

            <div id="cappedSection" class="disabled">
                <label class="dialogLabel">Size (bytes):</label><input type="text" name="capSize"
                                                                       disabled="disabled"
                                                                       title="Enter maximum size in bytes as the cap for the collection"/>

                <div class="clear"></div>
                <label class="dialogLabel">Max Documents:</label><input type="text" name="maxDocs"
                                                                        disabled="disabled"
                                                                        placeholder='optional'
                                                                        title="Enter maximum number of documents for capped collections"/>

                <div class="clear"></div>
                <label class="dialogLabel">Auto Index Id: <input type="checkbox" name="autoIndexId"
                                                                 checked="checked"
                                                                 disabled="disabled"
                                                                 title="Enable to automatically create index on _id"/></label>
            </div>

            <div class="clear"></div>
        </form>
    </div>
</div>
<div id="addGridFSDialog" class="yui-pe-content">
    <div class="hd">Add GridFS</div>
    <div class="bd">
        <form method="GET">
            <label class="dialogLabel">Bucket Name:</label>
            <input type="text" name="name" value=""/>

            <div class="clear"></div>
        </form>
    </div>
</div>
<div id="addDocDialog" class="yui-pe-content">
    <div class="hd">Add Document</div>
    <div class="bd">
        <form method="POST">
            <label class="dialogLabel">JSON format: </label>
            <br/>
            <textarea rows='5' style="display:block; width:100%" name="document">{}</textarea>

            <div class="clear"></div>
        </form>
    </div>
</div>

<div id="addUserDialog" class="yui-pe-content">
    <div class="hd">Add User</div>
    <div class="bd">
        <form method="POST">
            <label class="dialogLabel" for="addUser_user_name">Username:</label><input type="text"
                                                                                       name="addUser_user_name"
                                                                                       id="addUser_user_name"/>

            <div class="clear"></div>
            <label class="dialogLabel" for="addUser_password">Password:</label><input type="password"
                                                                                      name="addUser_password"
                                                                                      id="addUser_password"/>

            <div class="clear"></div>
            <label class="dialogLabel" for="addUser_readonly">Read only: <input type="checkbox" name="addUser_readonly"
                                                                                id="addUser_readonly"/></label>
        </form>
    </div>
</div>

<div id="addIndexDialog" class="yui-pe-content">
    <div class="hd">Add Index</div>
    <div class="bd">
        <form method="POST">
            <label class="dialogLabel" for="index_colname">Collection Name:</label><input name="index_colname"
                                                                                          id="index_colname"/>

            <div class="clear"></div>
            <label class="dialogLabel" for="index_keys">Keys(JSON format):</label><input type="text" name="index_keys"
                                                                                         id="index_keys" value="{}"/>
        </form>
    </div>
</div>


<div id="addFileDialog" class="yui-pe-content">
    <div class="hd">Add Files</div>
    <div class="bd">
        <form id="fileupload" method="POST" enctype="multipart/form-data">

            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="fileupload-buttonbar">
                <div class="span7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files" multiple>
                </span>
                    <button type="submit" class="btn btn-primary btn-upload start">
                        <i class="icon-upload icon-white"></i>
                        <span>Upload</span>
                    </button>
                </div>
            </div>
            <!-- The loading indicator is shown during image processing -->
            <div class="fileupload-loading"></div>
            <br>

            <!-- The table listing the files available for upload/download -->
            <table class="table table-striped">
                <tbody id="fileupload-body" class="files" data-toggle="modal-gallery"
                       data-target="#modal-gallery"></tbody>
            </table>
        </form>
    </div>
</div>
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="yui-pe-content modal modal-gallery hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>

        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body">
        <div class="modal-image"></div>
    </div>

    <div class="modal-footer">
        <a class="btn modal-download" target="_blank">
            <i class="icon-download"></i>
            <span>Download</span>
        </a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
            <i class="icon-play icon-white"></i>
            <span>Slideshow</span>

        </a>
        <a class="btn btn-info modal-prev">
            <i class="icon-arrow-left icon-white"></i>
            <span>Previous</span>
        </a>
        <a class="btn btn-primary modal-next">
            <span>Next</span>
            <i class="icon-arrow-right icon-white"></i>

        </a>
    </div>
</div>

<input type="hidden" id="currentColl" name="currentColl" value="">
<input type="hidden" id="currentDB" name="currentDB" value="">
<input type="hidden" id="currentBucket" name="currentBucket" value="">
<input type="hidden" id="username" name="user" value="">
<input type="hidden" id="host" name="host" value="">
<input type="hidden" id="port" name="port" value="">
<input type="hidden" id="newName" name="newName" value="">
<input type="hidden" id="connectionId" name="connectionId" value="">
</body>
</html>
